@page "/features/rtl-languages"
@page "/components/MudRTLProvider"

<DocsPage>
    <DocsPageHeader Title="RTL Languages" SubTitle="Right-to-Left (RTL) specific styling options" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Explanation">
                <Description>
                    Right-to-Left script is used in languages like Arabic and Hebrew where writing starts from the right of the page and continues to the left. The UI has to be mirrored horizontally because of that.
                </Description>
            </SectionHeader>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="MudRTLProvider">
                <Description>
                    Wrap your code inside a <CodeInline>MudRTLProvider</CodeInline>.
                    Note that <CodeInline>MudThemeProvider</CodeInline>, <CodeInline>MudDialogProvider</CodeInline> and <CodeInline>MudSnackbarProvider</CodeInline> must be children of
                    <CodeInline>MudRTLProvider</CodeInline> in order to support RTL. Your <CodeInline>MainLayout.razor</CodeInline> should look something like this.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RTLLanguagesMRtlProviderExample)" />
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Example">
                <Description>
                    By setting <CodeInline>RightToLeft="true"</CodeInline> you can change the layout to RTL.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(RTLLanguagesLayoutExample)" ShowCode="false" Block="true">
                <RTLLanguagesLayoutExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Text Fields">
                <Description>
                    <MudText>
                        Text Fields with <CodeInline>InputType.Email</CodeInline> or <CodeInline>InputType.Telephone</CodeInline> remain left-aligned, with the label remaining right-aligned.
                    </MudText>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RTLLanguagesTextfieldExample)" ShowCode="false">
                <RTLLanguagesTextfieldExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Border Radius">
                <Description>
                    <MudText>
                        If your application needs to support both left-to-right and right-to-left languages, make use of
                        <CodeInline>start</CodeInline> and <CodeInline>end</CodeInline> border radiuses instead of <CodeInline>left</CodeInline> and <CodeInline>right</CodeInline>.
                        Some other components like <MudLink Href="/components/drawer">MudDrawer</MudLink> also support <CodeInline>start</CodeInline> and <CodeInline>end</CodeInline> properties.
                    </MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="@nameof(RTLLanguagesBorderRadiusExample)" ShowCode="false">
                <RTLLanguagesBorderRadiusExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Other useful css classes">
            </SectionHeader>
            <ul class="mud-typography-body1">
                <li><CodeInline>.mud-flip-x-rtl</CodeInline> - Flips the element horizontally when in <b>rtl mode</b> (Can be used for icons which should be flipped in <b>rtl mode</b>)</li>
                <li><CodeInline>.mud-rtl</CodeInline> and <CodeInline>.mud-ltr</CodeInline> - Changes a specific element to use <b>left-to-right</b> or <b>right-to-left</b>  styling</li>
                <li><CodeInline>margin/padding</CodeInline> with <CodeInline>start/end</CodeInline> - See <MudLink Href="/features/spacing">Spacing</MudLink> for more information</li>
            </ul>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>